<template>
  <div class="div" style="width: 220px;background-color: rgb(48 65 86);overflow: auto;">
    <el-row>
      <el-col :span="24">
        <el-menu
          default-active="3"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="rgb(48 65 86)"
          text-color="#fff"
          active-text-color="#ffd04b">
          <router-link to="/teacherHome">
            <el-menu-item index="1">
              <i class="el-icon-menu" />
              <span slot="title">教师端主页</span>
            </el-menu-item>
          </router-link>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>学生管理</span>
            </template>
            <el-menu-item-group>
              <router-link to="/teacherAddStudent">
                <el-menu-item index="1-1">
                  <i class="el-icon-user-solid"></i>
                  添加学生
                </el-menu-item>
              </router-link>
              <router-link to="/teacherStudentList">
                <el-menu-item index="1-2">
                  <i class="el-icon-edit-outline"></i>学生信息
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-grid"></i>
              <span>班级管理</span>
            </template>
            <el-menu-item-group>
              <router-link to="/teacherAddClass">
                <el-menu-item index="2-1">
                  <i class="el-icon-s-cooperation"></i>
                  添加班级
                </el-menu-item>
              </router-link>
              <router-link to="/teacherClassList">
                <el-menu-item index="2-2">
                  <i class="el-icon-s-data"></i>
                  班级列表
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span>课程管理</span>
            </template>
            <el-menu-item-group>
              <router-link to="/teacherAddCourse">
                <el-menu-item index="3-1">
                  <i class="el-icon-folder-add"></i>添加课程
                </el-menu-item>
              </router-link>
              <router-link to="/teacherCourseList">
                <el-menu-item index="3-2">
                  <i class="el-icon-edit-outline"></i>课程信息
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
             <i class="el-icon-reading" />
              <span>作业管理</span>
            </template>
            <el-menu-item-group>
              <router-link to="/teacherAddTask">
                <el-menu-item index="4-1">
                  <i class="el-icon-folder-add"></i>添加作业
                </el-menu-item>
              </router-link>
              <router-link to="/teacherTaskList">
                <el-menu-item index="4-2">
                  <i class="el-icon-edit-outline"></i>作业信息
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-help" />
              <span>报表管理</span>
            </template>
            <el-menu-item-group>
              <el-submenu index="5-1">
                <template slot="title"><i class="el-icon-s-custom"></i>学生信息分析</template>
                <router-link to="/teacherStudentAgeAnalysis">
                  <el-menu-item index="1-1">
                    <i class="el-icon-s-tools"></i>学生年龄分析
                  </el-menu-item>
                </router-link>
              </el-submenu>
              <el-submenu index="5-2">
                <template slot="title"><i class="el-icon-s-order"></i>课程信息分析</template>
                <router-link to="/teacherCourseCreditAnalysis">
                  <el-menu-item index="2-1">
                    <i class="el-icon-s-ticket"></i>课程学分分析
                  </el-menu-item>
                </router-link>
              </el-submenu>
              <el-submenu index="5-3">
                <template slot="title"><i class="el-icon-s-marketing"></i>作业信息分析</template>
                <router-link to="/teacherTaskSubmitAnalysis">
                  <el-menu-item index="3-1">
                    <i class="el-icon-s-check"></i>作业提交分析
                  </el-menu-item>
                </router-link>
                <router-link to="/studentTaskAchievementAnalysis">
                  <el-menu-item index="3-3">
                    <i class="el-icon-s-cooperation"></i>学生成绩分析
                  </el-menu-item>
                </router-link>
              </el-submenu>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Left',
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style scoped>
  .router-link-active {
    text-decoration: none;
    color: yellow;
  }
  a{
    text-decoration: none;
    color: white;
  }
</style>
<style scoped>
  .div{
    overflow: auto
  }

  .div::-webkit-scrollbar{
    display: none;
  }
</style>
